<template>
<div class="searchTables" style="display: flex; width: 30%; margin-bottom: 10px;">
    <a-input-search v-model:value="inputValue" placeholder="输入产品名" enter-button="搜索" size="large" @search="onSearch" />
</div>

<div class="table">
    <a-table :columns="columns" :data-source="data" @resizeColumn="handleResizeColumn">
        <template #headerCell="{ column }">
            <template v-if="column.key === 'pName'">
                <span>
                    <smile-outlined />
                    产品名
                </span>
            </template>
        </template>

        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'pName'">
                <router-link :to="'/productDetails/'+record.puid">
                    {{ record.pname }}
                </router-link>
            </template>
            <template v-else-if="column.key === 'type'">
                <span>
                    <a-tag :key="record.type" :color=" 'cyan' ">
                        {{ record.type }}
                    </a-tag>
                </span>
            </template>
            <template v-else-if="column.key === 'isPass'">
                <span>
                    <a-tag :key="record.isPass" :color="record.isPass=='1'? 'green' :'red'">
                        {{ record.isPass == "1" ? "合格" : "不合格" }}
                    </a-tag>
                </span>
            </template>
            <template v-else-if="column.key === 'arrived'">
                <span>
                    <a-tag :key="record.arrived" :color="record.arrived=='1' ? 'blue' :'red'">
                        {{ record.arrived == "1" ? "已到达" : "未到达" }}
                    </a-tag>
                </span>
            </template>
            <template v-else-if="column.key === 'action'">
                <span>
                    <a-button type="primary" danger @click="deleteData(record)">删除</a-button>
                </span>
            </template>
        </template>
    </a-table>
</div>
</template>

    
<script>
import {
    SmileOutlined,
    DownOutlined,
} from '@ant-design/icons-vue';
import {
    message
} from 'ant-design-vue';
import saveImag from '@/utils/DownloadImg'
import API from '@/config/axiosInstance'
import {
    defineComponent,
    ref,
} from 'vue';
const data = ref([{
    puid: '',
    pname: '',
    cuid: '',
    type: "",
    last_source: '',
    next_source: '',
    arrived: '',
    isPass: '',
    mark: '',
    createTime: ''
}]);
export default defineComponent({
    inject: ["reload"],
    components: {
        SmileOutlined,
        DownOutlined,
    },
    setup() {
        const item = ref({
            puid: '',
            pName: '',
            type: "",
            address: '',
            source: '',
            lot: '',
            exp: ''
        });
        const columns = ref([{
                dataIndex: '产品名',
                key: 'pName',
                resizable: true,
                width: 200,
                minWidth: 100,
                maxWidth: 200,
            },
            {
                title: '类型',
                dataIndex: 'type',
                key: 'type',
                resizable: true,
                width: 100,
                minWidth: 100,
                maxWidth: 200,
            },
            {
                title: '上个位置',
                dataIndex: 'lastSource',
                key: 'lastSource',
            },
            {
                title: '下个位置',
                dataIndex: 'nextSource',
                key: 'nextSource',
            },
            {
                title: '是否到达',
                dataIndex: 'arrived',
                key: 'arrived',
            },
            {
                title: '检测结果',
                dataIndex: 'isPass',
                key: 'isPass',
            },
            {
                title: '记录创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                defaultSortOrder: 'descend',
                sorter: (a, b) => {
                    const aTime = new Date(a.createTime).getTime(); // 需要先转换成时间戳
                    const bTime = new Date(b.createTime).getTime();
                    return aTime - bTime;
                },
            },
            {
                title: '备注',
                dataIndex: 'mark',
                key: 'mark',
            },
            {
                title: '操作',
                key: 'action',
            }
        ]);
        return {
            data,
            columns,
            inputValue: ref(""),
            handleResizeColumn: (w, col) => {
                col.width = w;
            },
        };

    },
    methods: {
        onSearch() {
            this.getData();
        },
        getList() {
            API({
                method: 'get',
                url: 'history/lists'
            }).then(res => {
                console.log(res.data.info)
                this.data = res.data.info
            })
        },
        deleteData(record) {
            record.createTime = null
            API({
                method: 'post',
                url: 'history/delete',
                params: record
            }).then(res => {
                message.info(res.data.msg)
                console.log(res.data.info)
                this.reload();
            })
        },
        getData() {
            API({
                method: 'get',
                url: 'history/getData',
                params: {
                    'pName': this.inputValue
                }
            }).then(res => {
                message.success('成功')
                console.log(res.data.info)
                this.data = res.data.info
            })
        }
    },
    created() {
        this.getList();
    }
});
</script>
